<template>
    <div>
        <el-table :data="filteredTableData" stripe style="width: 100%">
            <el-table-column type="index" lable="序号" width="80"/>
            <el-table-column prop="id" label="ID"/>
            <el-table-column prop="name" label="菜名称" />
            <el-table-column prop="dishes_class" label="菜类别" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="count" label="数量" />
        </el-table>

    </div>

    <el-form-item label="选择收货地址">
        <el-select v-model="diandan.address_id" placeholder="请选择收货地址">
            <el-option
                v-for="item in adress"
                :key="item.id"
                :label="'收货人:'+item.name+'；电话:'+item.phone+'；收货地址:'+item.address"
                :value="item.id"
            />
        </el-select>
    </el-form-item>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="备注" prop="address">
                <el-input v-model="diandan.remark" placeholder="请输入备注" clearable/>
            </el-form-item>
        </el-col>
    </el-row>
    总价：{{money}}元
    <el-button type="primary" @click="generate()">支付</el-button>
<!--    <el-button type="primary" @click="aa">查看地址</el-button>-->
</template>

<script  setup lang="ts">
import {computed, inject, onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import axios from 'axios';
import router from "../../../router.ts";

const tableData=ref([]);
const yexuang=ref([]);


// const aa=async ()=>{
//     alert("地址id:"+diandan.value.address_id)
//     // alert(diandan.value.address_id);
//     // alert(adress.value.length);
// }

//---------------------- 查询购物车数据 ------------------------------
const shop=ref({
    id: '',
    shopname: '',//店铺名称
    pwd: '',
    checked: '', //审核状态
    score: '',//评分
    phone: '',// 手机
    address: '',// 地址
    state: '',//状态
    picture: '',// 图片
    income: '',//收入
});

const diandan=ref({
    id: 0,//id
    dingdan_num: '',//订单编号
    user_id: 0,//用户编号
    shop_id: 0,//店铺编号
    rider_id: 0,//骑手编号
    address_id: 0,//地址编号
    // card_id: 0,//订单详细表id
    state: '0',//订单状态
    money: 0,//金额
    remark: '',//订单备注
    time: '',//下单时间
    end_time: '',//配送完成时间
    gratuity: '',//配送费
});

//---------------------------- 自定义组件事件 -----------------------------
const emits = defineEmits([
  "closeDialog",	// 关闭 dialog
]);

const money=ref(0);
//--------------------------获取用户信息-----------------------
const user=ref({});
const acquireUsers=async ()=>{
    const {data} = await axios.get('/api/user1',{params:user.value});
    user.value=data;
    diandan.value.user_id=user.value.id;
    GetAddress();
}
//---------------------- 获取用户地址 ------------------------------
const adress = ref([]);
const GetAddress=async ()=>{
    const {data} = await axios.get('/api/user_adress/user/'+user.value.id);
    adress.value=data;
    car.value.user_name=user.value.id;
    for(var i=0;i<adress.value.length;i++)
        if(adress.value[i].is_default==1)
            diandan.value.address_id=adress.value[i].id;
}

//---------------------- 提交订单 ------------------------------
const generate=async ()=>{
    if(diandan.value.address_id==0){
        ElMessage.error('请选择地址');
    }else{
        diandan.value.dingdan_num='D'+new Date().getTime();
        car.value.car_num=diandan.value.dingdan_num;
        diandan.value.money=money.value;
        const {data} = await axios.post('/api/dingdan',diandan.value);
        if(data>=1){
            ElMessage.success('下单成功');
        }else{
            ElMessage.error('下单失败');
        }
        clearCart();
    }
}
//---------------------- 清空购物车 ------------------------------
const car=ref({
    car_num: '',
    user_name: '',
    shop_name: '',
});
const clearCart=async ()=>{
    const { data } = await axios.post('/api/dingdandetail', car.value);
    // alert("添加订单明细");
    emits("closeDialog");
}
//---------------------- 筛选大于0的行数据 ------------------------------
const filteredTableData = computed(() => {
    return tableData.value.filter(item => item.count > 0);
});

//--------------------- 传入下单信息 ------------------------------
const updateData = (obj1,obj2,obj3) => {
    shop.value = obj1;
    car.value.shop_name=shop.value.id;
    diandan.value.shop_id=shop.value.id;
    // alert("商家id:"+shop.value.id);
    tableData.value = obj2;
    money.value = obj3;
    acquireUsers();
}
onMounted(()=>{
    acquireUsers();
})
// -------------------------暴露给父组件使用的方法
defineExpose({
    updateData,
})


</script>

<style scoped>

</style>